{{ extend './_layouts/home.html' }}
{{ block 'title'}}菜单列表{{ /block }}
{{ block 'head'}}
<link rel="stylesheet" href="/public/css/menu.css">
{{ /block}}

<!-- nav start -->
{{ include './_partials/nav.html'}}
<!-- nav end -->

{{ block 'content' }}
<!-- 轮播图 开始 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides 轮播图片 开始 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <!-- <img src="./images/bg/bg05.jpg" alt="."> -->
            <img src="/public/images/bg/bg08.jpeg" alt=".">

            <div class="carousel-caption">
                <h2>薄饼</h2>
                <p>薄饼，面食之一,用烫面做成很薄的饼,两张相重叠,在锅上烙熟后分开。</p>
            </div>
        </div>
        <div class="item">
            <img src="/public/images/bg/bg09.jpg" alt=".">
            <div class="carousel-caption">
                <h2>烤鸡</h2>
                </h2>
                <p>烤鸡，是一道中餐菜肴。主要原料有鸡肉、盐、味精、葱姜蒜、五香八角等。制作者可依据自己的口味添加不同的调料制作各种口味的烤鸡。但烤鸡较为油腻，食用宜适量。</p>
            </div>
        </div>
        <div class="item">
            <img src="/public/images/bg/bg07.jpeg" alt=".">
            <div class="carousel-caption">
                <h2>粤菜</h2>
                <p>粤菜即广东菜，是中国四大菜系、八大菜系之一。</p>
            </div>
        </div>
    </div>
    <!-- Wrapper for slides 轮播图片 结束 -->

    <!-- Controls 左右按钮-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- 轮播图 结束 -->

<!-- Begin Product Area -->
<div class="product-area section-space-top-100">
    <div class="container">
        <div class="row">
            <div class="">
                <!-- col-xs-12 col-sm-9 -->
                <h2>店铺</h2>
                <hr>
                <!-- 店铺列表渲染开始 -->
                <div class="row">
                    {{ each shops value}}
                    <div class="col-lg-4 col-sm-6">
                        <div class="thumbnail">
                            <img src="{{value.shop_img}}" alt="shop image" class="shop_img">
                            <div class="caption">
                                <h2>{{value.shop_name}}</h2>
                                <p>简介：{{value.shop_introduction}}</p>
                                <p>地址：{{value.shop_address}}</p>
                                <p>投诉电话：{{value.shop_phone}}</p>
                                <p>
                                    <a href="/menu/shop?id={{value.id}}" class="btn btn-info" role="button">进入店铺</a>
                                </p>
                            </div>
                        </div>
                    </div><!-- /.col-lg-4 -->
                    {{/each}}
                </div><!-- /.row -->
                <!-- 店铺列表渲染结束 -->



                <!-- 菜单专区开始 -->

            </div>
            <!-- 菜单专区结束 -->

            <!-- <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
                    <div class="list-group">
                        <a href="#" class="list-group-item active">购物车清单</a>
                        <table class="table table-hover ">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>数量</th>
                                    <th>操作</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr class="cart-item">
                                    <th scope="row">米饭</th>
                                    <td>&nbsp; 3</td>
                                    <td>
                                        <button type="button" class="btn btn-danger clear-item">x</button>
                                    </td>

                                </tr>
                                <tr class="cart-item">
                                    <th scope="row">木瓜</th>
                                    <td>&nbsp; 1</td>
                                    <td>
                                        <button type="button" class="btn btn-danger clear-item">x</button>
                                    </td>
                                </tr>


                            </tbody>
                        </table>

                        <div class="active go_cart">
                            <a href="/cart" class="btn btn-danger">购物车</a>
                        </div>

                    </div>
                </div> -->
            <!--/.sidebar-offcanvas-->
        </div>
    </div>
</div>
<!-- Product Area End Here -->
{{ /block }}


<!-- footer start -->
{{ include './_partials/footer.html'}}
<!-- footer end -->

{{ block 'script'}}
<script src="/public/js/menu.js"></script>
<script>
    function addCart(productId, user) {
        // console.log(productId);
        // console.log(user);
        // console.log(user._id);
        $.ajax({
            url: "/menus/add",
            type: "POST",
            data: {
                productId: productId,
                userId: user._id
            },
            dataType: "json",
            success: function (data) {
                var err_code = data.err_code
                if (err_code === 0) {
                    window.alert('商品添加成功！')
                    // 服务端重定向针对异步请求无效
                    // window.location.href = '/menu'
                } else if (err_code === 500) {
                    window.alert('服务器忙，请稍后重试！')
                }
            }
        });
    }




</script>
{{ /block}}